<!DOCTYPE html>
<html lang="zh" class="theme-cosmic">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>星枢档案库 - 物种起源</title>
    <script src="/js/boot.js"></script>
</head>
<body>
<div id="header-placeholder"></div>
<div id="stars"></div>
<!-- 主内容 -->
<div class="container">
    <!-- 查询控件区 -->
    <section class="controls">
        <span class="select-group"><label>域：</label><select id="yu" class="sop-param"></select></span>
        <span class="select-group"><label>界：</label><select id="jie" class="sop-param"></select></span>
        <span class="select-group"><label>门：</label><select id="men" class="sop-param"></select></span>
        <span class="select-group"><label>纲：</label><select id="gang" class="sop-param"></select></span>
        <span class="select-group"><label>目：</label><select id="mu" class="sop-param"></select></span>
        <span class="select-group"><label>科：</label><select id="ke" class="sop-param"></select></span>
        <span class="select-group"><label>属：</label><select id="shu" class="sop-param"></select></span>
        <br>
        <span class="input-group"><label>名称：</label><input type="text" id="name" class="sop-param" placeholder="请输入名称" /></span>
        <span class="input-group"><label>层级：</label><input type="text" id="level" class="sop-param" placeholder="0-9" maxlength="1" /></span>
        <button id="searchBtn" onclick="query('/api/special/list')">🔍 查询</button>
        <button id="resetBtn">🔄 重置</button>
    </section>
    <!-- 数据表格 -->
    <table id="dataTable">
        <thead>
        <tr>
            <th style="width: 15%" data-key="name">名称</th>
            <th style="width: 25%" data-key="fenlei">分类</th>
            <th style="width: 60%" data-key="content">描述</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
    <!-- 分页区域 -->
    <div id="pagination-placeholder"></div>
</div>
<!-- 加载中提示 -->
<div id="loading" class="loading hidden">🌀 数据加载中...</div>
</body>
</html>